<template>
  <div class="home">
    <div class="center">
      <!-- 首页左边 开始-->
      <div class="home-container-l">
        <carousel></carousel>
        <question-card
          v-for="item in questionList"
          :key="item.createdAt"
          :questionTitle="item.questionTitle"
          :questionAnswer="item.questionAnswer"
          :questionType="item.questionType"
          :createdAt="item.createdAt"
          :id="item.id"
          :lookNum="item.lookNum"
          :preView="item.questionPreView"
          @goDetail="goQuestionDetail"
        ></question-card>
        <div style="text-align: center">查看更多</div>
        <question-card
          v-for="item in articleList"
          :key="item.id"
          :questionTitle="item.articleTitle"
          :questionAnswer="item.articleContent"
          :questionType="item.articleType"
          :createdAt="item.createdAt"
          :id="item.id"
          :lookNum="item.lookNum"
          :preView="item.articlePreView"
          @goDetail="goArticleDetail"
        ></question-card>
        <div style="text-align: center">查看更多</div>
      </div>
      <!-- 首页左边 结束-->
      <!-- 首页右边 开始-->
      <div class="home-container-r">
        <side-card
          :hotList="hotList"
          @goHotDetail="goHotQuestionDetail"
        ></side-card>
        <div style="margin-top: 20px"></div>
        <side-card
          :hotList="hotArticles"
          @goHotDetail="goHotArticleDetail"
          :type="2"
        ></side-card>
      </div>
      <!-- 首页右边 结束-->
    </div>
  </div>
</template>

<script>
import Carousel from '@/components/Carousel.vue'
import SideCard from '@/components/SideCard.vue'
import QuestionCard from '@/components/QuestionCard.vue'
import {
  getHostQuestions,
  getHotArticles,
  getQuestions,
  getArticle
} from '@/api/api'
export default {
  name: 'HomeView',
  components: {
    Carousel,
    SideCard,
    QuestionCard
  },
  created() {},
  data() {
    return {
      hotList: [],
      hotArticles: [],
      questionList: [],
      articleList: []
    }
  },
  created() {
    this.getArticles()
    this.getAllQuestions()
    getHostQuestions().then((res) => {
      this.hotList = res.data.data
    })
    getHotArticles().then((res) => {
      console.log(res.data.data)
      this.hotArticles = res.data.data.map((item) => {
        const { articleTitle, ...rest } = item
        return {
          questionTitle: articleTitle,
          ...rest
        }
      })
    })
  },
  methods: {
    goQuestionDetail(id) {
      console.log(id)
      this.$router.push({
        path: `/questionsDetail/${id}`
      })
    },
    goArticleDetail(id) {
      console.log(id)
      this.$router.push({
        path: `/articleDetail/${id}`
      })
    },
    goHotQuestionDetail(item) {
      this.$router.push({
        path: `/questionsDetail/${item.id}`
      })
    },
    goHotArticleDetail(item) {
      this.$router.push({
        path: `/articleDetail/${item.id}`
      })
    },
    getAllQuestions() {
      const data = {
        curentPage: 1,
        pageSize: 5,
        type: -1
      }
      getQuestions(data).then((res) => {
        console.log(res.data.data)
        let data = res.data.data
        this.total = data.count
        this.questionList = data.rows
      })
    },
    getArticles() {
      const data = {
        curentPage: 1,
        pageSize: 5,
        type: -1
      }
      getArticle(data).then((res) => {
        const data = res.data.data
        this.articleList = data.rows
        console.log(res)
      })
    }
  }
}
</script>
<style scoped>
.home {
  margin-top: 66px;
}
.center {
  width: 1200px;
  margin: auto;
  padding-top: 40px;
  display: flex;
}
.home-container-r {
  margin-left: 20px;
}
</style>
